<template>
  <a-row>
    <a-col span="5">
      <a-card :bordered="true" :bodyStyle="{padding:'0'}" style="margin-right: 4px">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24" style="margin-left: 10px;margin-top: 20px;margin-bottom: 10px">
            <a-form-item label="挂号方式">
              <a-select default-value="1" style="width: 120px" @change="handleChange" v-model="queryParam.appointmentType">
                <a-select-option value="1">
                  门诊
                </a-select-option>
                <a-select-option value="2">
                  出诊
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-row>
        </a-form>
        <div :style="{ width: '99%', border: '1px solid #d9d9d9', borderRadius: '4px'}">
          <a-calendar :fullscreen="false" @panelChange="onPanelChange" :value="date"  @select="onSelect"  valueFormat="YYYY-MM-DD"/>
        </div>
        <div style="overflow-y: scroll;">
          <a-row style="height: 800px;">
            <a-list item-layout="horizontal" :data-source="doctorDataSource">
              <div
                v-if="showLoadingMore"
                slot="loadMore"
                :style="{ textAlign: 'center', marginTop: '12px',marginBottom:'12px', height: '32px', lineHeight: '32px' }"
              >
                <a-spin v-if="loadingMore" />
                <a-button @click="onLoadMore" style="margin-bottom: 12px">
                  加载更多
                </a-button>
              </div>
              <a-list-item slot="renderItem" slot-scope="item, index">
                <a-card :bodyStyle="chooseId==item.id?bodyStyle1:bodyStyle0" :bordered="false" style="width:98%"
                        @click="handleChoosePatient(item)">
                  <a-row style="margin: 10px 10px 5px 20px">
                    <a-col :span="item.id>0?7:11">
                      <label :style="chooseId==item.id?'font-weight: bold;color:white':'font-weight: bold;'">{{ item.name }}</label>
                    </a-col>
                    <a-col span="13" align="center">
                      <label :style="chooseId==item.id?'margin-left: 14px;margin-right: 2px;color:white':'margin-left: 10px;margin-right: 2px;color:#8b96a3'">
                         已约
                      </label>
                      <label :style="chooseId==item.id?'margin-right: 1px;color:white':'margin-right: 1px;color:#333'">
                         {{item.totalQty}}
                      </label>
                      <label :style="chooseId==item.id?'margin-right: 1px;color:white':'margin-right: 1px;color:#8b96a3'">
                        位&nbsp;&nbsp;&nbsp;待诊
                      </label>
                      <label :style="chooseId==item.id?'margin-right: 1px;color:white':'margin-right: 1px;color:#333'">
                       {{item.waitQty}}
                      </label>
                      <label :style="chooseId==item.id?'color:white':'color:#8b96a3'">
                        位
                      </label>
                    </a-col>
                    <a-col span="4" align="right" v-if="item.id>0">
                       <a-button type="primary" size="small" v-if="item.id>0">挂号</a-button>
                    </a-col>
                  </a-row>
                </a-card>
              </a-list-item>
            </a-list>
          </a-row>
        </div>
      </a-card>

    </a-col>
    <a-col span="19">
      <a-card :bordered="true" :bodyStyle="{padding:'0'}">
        <div style="overflow-y: scroll;">
          <a-row style="height: 800px;margin-left: 10px;margin-right: 20px;margin-top: 20px">
            <a-tabs :default-active-key="activeKey" @change="callback">
              <a-tab-pane key="" tab="全部">
              </a-tab-pane>
              <a-tab-pane key="8" tab="待签到" force-render v-if="queryParam.appointmentType=='1'">
              </a-tab-pane>
              <a-tab-pane key="1" tab="待就诊" force-render>
              </a-tab-pane>
              <a-tab-pane key="3" tab="已就诊" force-render>
              </a-tab-pane>
              <a-tab-pane key="5" tab="已过期" force-render v-if="queryParam.appointmentType=='1'">
              </a-tab-pane>
              <a-tab-pane key="4" tab="已取消" force-render>
              </a-tab-pane>
              <a-input-search placeholder="搜索姓名/电话" enter-button slot="tabBarExtraContent" />
            </a-tabs>

            <div>
              <a-table
                ref="table"
                size="middle"
                bordered
                rowKey="id"
                :scroll="{x:1300}"
                :columns="columns"
                :dataSource="dataSource"
                :pagination="ipagination"
                :loading="loading"
                @change="handleTableChange">

                <template slot="imgSlot" slot-scope="text">
                  <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
                  <img v-else :src="getImgView(text)" height="30px" alt=""
                       style="max-width:80px;font-size: 12px;font-style: italic;" />
                </template>
                <span slot="action" slot-scope="text, record">

                 </span>

              </a-table>
            </div>
          </a-row>
        </div>

      </a-card>

    </a-col>
  </a-row>
</template>

<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'
import { deleteAction, getAction, httpAction, postAction } from '@api/manage'
import moment from 'moment'

export default {
  name: '门诊',
  mixins: [mixinDevice, JeecgListMixin],
  components: {
    JDictSelectTag
  },
  data() {
    return {
      description: '挂号页面',
      visible: false,
      queryParam: {
        appointmentType:"1",
        registrationStatus:""
      },
      layout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 }
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      url: {
        list: '/his/registration/list',
        doctorList:'/his/registration/doctor/list'
      },
      pageNo: 1,
      loading: true,
      chooseId: 0,
      loadingMore: false,
      showLoadingMore: true,
      doctorDataSource: [],
      bodyStyle0: { padding: '0' ,height:'65px',borderRadius: '8px',marginLeft: '2%' },
      bodyStyle1: { padding: '0' ,height:'65px',borderRadius: '8px',marginLeft: '2%',background: '#69c966' },
      // 表头
      columns: [
        {
          title: '姓名',
          align: 'center',
          dataIndex: 'patientName',
          width: 150,
        },
        {
          title: '性别',
          align: 'center',
          dataIndex: 'patientSex',
          width: 100
        },
        {
          title: '年龄',
          align: 'center',
          dataIndex: 'patientAge',
          width: 100,
          customRender: function(t, r, index) {
            return t+"岁";
          }
        },
        {
          title: '电话',
          align: 'center',
          dataIndex: 'patientPhone',
          width: 100
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'registrationStatus_dictText',
          width: 100
        },
        {
          title: '就诊时间',
          align: 'center',
          dataIndex: 'totalPrice',
          width: 150,
          customRender: function(t, r, index) {
            return r.subsectionName+"("+r.schedulingBeginTime+"~"+r.schedulingEndTime+")";
          }
        },
        {
          title: '序号',
          align: 'center',
          dataIndex: 'sort',
          width: 110
        },
        {
          title: '科室',
          align: 'center',
          dataIndex: 'deptName',
          width: 110
        },
        {
          title: '医生',
          align: 'center',
          dataIndex: 'doctorName',
          width: 110
        },
        {
          title: '初/复诊',
          align: 'center',
          dataIndex: 'registrationType',
          width: 110,
          customRender: function(t, r, index) {
            return t=="1"?"初诊":"复诊"
          }
        }
      ],
      activeKey:"",
      date:"",
    }
  },
  created() {
    this.date=moment(this.getCurrentDate())
    this.getData(true);
    this.getDoctor(true);
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    moment,
    handleChoosePatient(item) {
      if (this.chooseId == item.id) {
        this.chooseId = 0
        return
      }
      this.chooseId = item.id
      if(item.id>0){
        this.queryParam.doctorId = item.id
      }else{
        this.queryParam.doctorId = ""
      }
      this.getData(true);
    },
    onSelect(value) {
      this.date= value;
      this.getData(true);
      this.getDoctor(true);
    },
    onPanelChange(value, mode) {
      console.log(value, mode)
    },
    callback(key) {
      this.queryParam.registrationStatus = key
      this.getData(true);
    },
    handleChange(value) {
      this.activeKey = ""
      this.getData(true);
    },
    onLoadMore() {
      this.loadingMore = true
      this.showLoadingMore = false
      this.getDoctor(false)
    },
    getDoctor(isRefresh) {
      const that=this;
      if(isRefresh){
        that.pageNo=1;
      }
      getAction(that.url.doctorList,{pageNo:that.pageNo,date:that.date}).then((res) => {
        if (res.success) {
          that.doctorDataSource = res.result.records;
          if(res.result.totalPages>res.result.pageNo){
            that.showLoadingMore = true;
            that.pageNo++;
          }else{
            that.showLoadingMore = false;
          }
        }
      }).finally(() => {
        this.loadingMore = false;
      })
    },
    getData(isRefresh) {
      const that = this
      if (isRefresh) {
        that.queryParam.pageNo = 1
      }
      that.queryParam.schedulingDate = this.date;
      that.loadData();
    },


    modalFormOk() {
      this.handleRefresh(this.chooseId)
    },
    callbackByTabs(key) {
      this.getData(true, key)
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';


.ant-descriptions-row .ant-descriptions-item-label {
  width: 200px;
}
</style>
